<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<title>Extending the code completion</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta name="generator" content="RoboHelp by eHelp Corporation www.ehelp.com">
<link rel="stylesheet" href="interakt_new_ns.css" type="text/css">
<script type="text/javascript" language="JavaScript">
<!--
if (navigator.appName !="Netscape")
{   document.write("<link rel='stylesheet' href='interakt_new.css'>");}
//-->
</script>
<style type="text/css">
<!--
div.whs1 { width:100%; }
p.whs2 { text-align:right; }
img_whs3 { border:none; width:40px; height:50px; float:none; }
table.whs4 { width:100%; }
td.whs5 {  }
hr.whs6 { float:aligncenter; }
ul.whs7 { list-style:disc; }
img_whs8 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:292px; height:103px; float:none; }
img_whs9 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:380px; height:179px; float:none; }
-->
</style>

<script type="text/javascript" language="JavaScript">
<!--
function reDo() {
  if (innerWidth != origWidth || innerHeight != origHeight)
     location.reload();
}
if ((parseInt(navigator.appVersion) == 4) && (navigator.appName == "Netscape")) {
        origWidth = innerWidth;
        origHeight = innerHeight;
        onresize = reDo;
}
onerror = null; 
//-->
</script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute; left:0px; top:0px; z-index:4; visibility:hidden; }
-->
</style>

<script type="text/javascript" language="javascript1.2" src="whtopic.js">
</script>
<script type="text/javascript" language="javascript1.2" src="whutils.js">
</script>
<script type="text/javascript" language="javascript" src="whver.js">
</script>
<script type="text/javascript" language="javascript1.2">
<!--
    var linkedScrollbarStyle = "<link rel='stylesheet' href='wf_topics.css'>";
    if( (!isTopicOnly()) &&(parent.gbFHPureHtml == null) )
    {
        document.write(linkedScrollbarStyle);
    }
    //-->
</script>
</head>
<body>
<script type="text/javascript" language="javascript1.2">
<!--
if (window.addTocInfo)
{
addTocInfo("Using JSEclipse\nUsing code completion\nExtending the code completion");

  addShowButton();
}
if (window.setRelStartPage)
{
setRelStartPage("jseclipse.htm");

        sendTopicLoaded();
        autoSync(1);
        sendSyncInfo();
        sendAveInfo();
        sendBgColorInfo();
}
//-->
</script>
<div id="header" class="whs1">
<p align="right" class="whs2"><img src="images/adobe_logo.png" width="40px" height="50px" border="0" class="img_whs3" alt=""></p>
<table width="100%" class="whs4">
<tr>
<td colspan="3" valign="top" class="whs5">&#160;<br>
&#160;<br>
<hr class="whs6"></td>
</tr>
</table>
</div>
<h1>Extending the code completion</h1>
<p><span class="Labels">JSEclipse</span> comes with code completion for most of the default libraries (document, system, etc). On top of that, as you work on the project, new libraries are built, specific for the current project, with the functions for each file, variable name and so forth.</p>
<p>To make it even more extendable, you can define your own code completion libraries. That is if you use a particular class in more than one project, you can define the code completion library for it. You simply have to create an XML file based on a specific format, and use the Add library dialog to integrate it with <span class="Labels">JSEclipse</span></p>
<p>&#160;</p>
<h3>The XML file format</h3>
<p>To define a new code completion library you must create an <span class="Labels">XML</span> file to describe the options to suggest and for which element. To explain it better, let's &#160;create the <span class="Labels">XML</span> file that will add code completion for the class <span style="font-weight:bold;"><b>element</b></span> which has three methods. For the method names let's use some already existing functions: <span class="Code">getElementById</span>, <span class="Code">getElementsByTagName</span> and <span class="Code">innerHTML</span>.</p>
&#160;
<p>&#160;</p>
<ul type="disc" class="whs7">
<li class="kadov-p">
<p>The XML file must start with the version and encoding definition. &#160;On the first line you have:<span class="Code"><br>
<br>
&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span><br>
&#160;</p>
</li>
<li class="kadov-p">
<p>Next define the name of the class top trigger code completion, and the eventual classes it extends<span class="Code"><br>
<br>
&lt;completion prefix="element" extends="Object"&gt;</span> <span style="font-weight:bold;"><b><br>
<br>
Note</b></span>: to have a valid XML document you will have to close the &#160;&lt;completion&gt; tag after all code completion options have been added.</p>
</li>
<li class="kadov-p">
<p>Next you must define the items to display in the code completion dialog. For the first method use:<span class="Code"><br>
<br>
&lt;item repl="getElementById()" display="getElementById(String id) Element" /&gt;<br>
&#160;</span></p>
</li>
<li style="list-style:none; display:inline;">
<ul type="disc" class="whs7">
<li class="kadov-p">
<p>The <span class="Code">repl</span> attribute stores the value to insert into the document</p>
</li>
<li class="kadov-p">
<p>The <span class="Code">display</span> attribute contains the text to show in the code completion window.</p>
</li>
</ul>
</li>
<li class="kadov-p" value="4">
<p>Optionally you can add documentation or notes for the completion option. You must enclose it in a &lt;[CDATA] element, as you can see below:<span class="Code"><br>
<br>
&lt;![CDATA[Get an element by its ID.]]&gt;</span><br>
&#160;</p>
</li>
<li class="kadov-p">
<p>XML nodes for the other two methods are similar. You can decide what you display, but you should insert the correct code:<span class="Code"><br>
<br>
&lt;item repl="getElementsByTagName()" display="getElementsByTagName(String name) Element[]" /&gt; &#160;&#160;&#160;&#160;<br>
&lt;item repl="innerHTML" display="innerHTML String" /&gt;</span><br>
&#160;</p>
</li>
<li class="kadov-p">
<p>At last do not forget to close the &lt;completion&gt; tag or the XML file will not be valid.</p>
</li>
</ul>
<p>&#160;</p>
<h3>Integrate the custom library in JSEclipse<a name="integrate"></a></h3>
<p>To make the defined library available from within <span class="Labels">Eclipse</span>, you should copy it in a folder within the workspace. The other, simpler way is to use the Add library feature added by <span class="Labels">JSEclipse</span>. To access it, click on the <span class="Labels">JSEclipse menu &gt; Add library</span>.<br>
&#160;</p>
<p><script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4)) 
{  if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/addlibrary_dialog.png' x-maintain-ratio='TRUE' width='292px' height='103px' border='1' class='img_whs8'>");}
else
{   document.write("<img src='images/addlibrary_dialog.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='292px' height='103px' border='1' class='img_whs8'>");}
//-->
</script></p>
<p>&#160;</p>
<p>To add a new library, simply click Browse and select it from the file system. Then click <span class="Labels">OK</span> and the new code completion will be available from eclipse:</p>
<p>&#160;</p>
<p><script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4)) 
{  if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/element_custom_completion.png' x-maintain-ratio='TRUE' width='380px' height='179px' border='1' class='img_whs9'>");}
else
{   document.write("<img src='images/element_custom_completion.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='380px' height='179px' border='1' class='img_whs9'>");}
//-->
</script><br>
&#160;</p>
<p><span style="font-weight:bold;"><b>Note</b></span>: because the element class was defined as extending the class object, the methods of the object class are suggested for completion as well.</p>
<p>&#160;</p>
<div id="footer" class="whs1">
<table width="100%" class="whs4">
<tr>
<td colspan="3">
<hr class="whs6"></td>
</tr>
</table>
</div>
</body>
</html>
